<template>
  <div>
    <!-- 表格 -->
    <Grid>
      <!-- 表格操作 -->
      <template #action>
        <slot :data="data" name="action">
          <el-button :icon="Edit" link type="primary" />
          <el-button :icon="Delete" link type="danger" />
        </slot>
      </template>
      <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
      <template #toolbar-buttons>
        <el-button class="ml-auto" type="primary">
          {{ toolbarbuttonName }}
        </el-button>
      </template>
    </Grid>
  </div>
</template>

<script setup lang="ts">
import type { columnsType, RowType } from './type';

import type { PropType } from 'vue';
// 引入表格与类型
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';

// 引入删除图标
import { Delete, Edit } from '@element-plus/icons-vue';

const props = defineProps({
  // 表格数据
  data: {
    type: Array as PropType<RowType[]>,
    default: () => [],
  },
  // 列表数据
  columns: {
    type: Array as PropType<columnsType[]>,
    default: () => [],
  },
  toolbarbuttonName: {
    type: String,
    default: '',
  },
});

// 表格配置项
const gridOptions: VxeGridProps<RowType> = {
  data: props.data,
  columns: props.columns,

  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons', // 指定自定义按钮插槽名称
    },
    custom: true,
    export: true,
    import: true,
    refresh: true,
    zoom: true,
  },
  treeConfig: {
    transform: true, // 自动将 parentId 转换为树形结构
    lazy: false, // 非懒加载
    indent: 20, // 缩进宽度
  },
  exportConfig: {},
  border: true,
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
};

// 表格事件
const gridEvents = {};

// 表格实例
const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions });
</script>
